<template>
    <div class="page-group">
        <div class="page page-current" style="background: #fff;">
            <header class="bar bar-nav">
                <h1 class='title'>login</h1>
            </header>
            <div class="content">
                <div class="row" id="topDiv">
                    <img  id="loginPic" class="img-responsive center-block">
                </div>
                <div class="from-content">
                    <form style="width: 80%;" class="center-block">
                        <input type="text" id='userName'
                               placeholder="用户名">
                        <input type="password" id="password"
                               placeholder="密码">
                    </form>
                </div>
                <a @click="login" style="width:50%"
                   class="button  button-light button-round center-block">登录</a>
            </div>
        </div>
    </div>
</template>
<style>
    .row {
        margin: 0
    }

    .from-content {
        margin: 1rem;
        padding: 2rem 0 2rem;
        background: #F9F9F9;
    }

    input {
        margin-top: 5px;
        padding: 6px 12px;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 1.42857143;
        background-color: transparent;
        border-radius: 50px;
        border-top: transparent;
        border-left: transparent;
        border-right: transparent;
        border-bottom: solid 1px #EBEBEB;
    }
</style>
<script>
    import * as FWindow from '../util/FWindow'
    function resize() {
        console.log('resize')
        var {width,height} = FWindow.windowSize()
        $('#loginPic').css('width', width * 2 / 3)
        $('#loginPic').css('height', height / 3)
        $('#topDiv').css('margin-top', height / 10)
    }
    export default{
        ready(){
            window.onresize = resize;
        },
        methods: {
            login: function () {
                var userName = $("#userName").val()
                var password = $("#password").val()
//                console.log({
//                    u: userName,
//                    p: password
//                })
                this.$router.go('home')
            }
        }
    }
</script>
